<template>
    <div class="content">
        <van-sticky>
        <van-dropdown-menu active-color=#9b89e1>
          <van-dropdown-item v-model="value1" :options="option1" />
          <van-dropdown-item v-model="value2" :options="option2" />
        </van-dropdown-menu>  
      </van-sticky>
      <div class="detail1" v-for="i of 12" :key=i>
        <router-link to="/details">
        <div class="main">
          <span class="names">保利国际影城（深圳龙华悦都店）</span>
          <span class="price">24</span>
          <span class="ch">元起</span>
        </div>
        <div class="road">
          <div class="lu">
            龙华区龙华新区龙观东路与清龙路交汇处保利天街3楼保利国际影城
          </div>
          <div class="distance">1km</div>
        </div>
        <div class="cinema-tags">
          <span class="cinema-tags-item">退</span>
          <span class="cinema-tags-item">改签</span>
          <span class="cinema-tags-item">小吃</span>
          <span class="cinema-tags-item">折扣卡</span>
        </div>
        <div class="cinema-tagv">
          <p><span>卡</span>开卡特惠 , 首单1张最高立减6元</p>
        </div>
        <p>近期场次:20:10丨22:15丨次日00:20</p>
        </router-link>
      </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      value1: 0,
      value2: "a",
      option1: [{ text: "全城", value: 0 }],
      option2: [{ text: "特色", value: "a" }]
    };
  }
};
</script>
<style scoped>
.detail1 {
  height: 150px;
  border-bottom: 1px solid rgba(7, 7, 7, 0.2);
  padding: 13px 15px 13px 15px;
}
.detail1 > .main {
  padding: 0px 0px 0px 0px;
  position: relative;
  overflow: hidden;
}
.detail1 > .main > .names {
  font-weight: bold;
  color: #000;
}
.detail1 > .main > .price {
  color: #fd3d37;
  font-size: 17px;
  font-family: PingFangSC-Regular, Hiragino Sans GB, sans-serif;
}
.detail1 > .main > .ch {
  color: #fd3d37;
  font-size: 12px;
  font-family: PingFangSC-Regular, Hiragino Sans GB, sans-serif;
}
.detail1 > .road {
  font-size: 13px;
  /* margin-left: 15px; */
  padding: 10px 60px 0px 0;
  /* margin-left: 13px; */
  position: relative;
  /* text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap; */
  color: #666;
}
.detail1 > p {
  margin-top: 10px;
  color: #777;
}
.detail1 > .road > .lu {
  word-break: keep-all; /* 不换行 */
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
  text-overflow: ellipsis;
}
.detail1 > .road > .distance {
  position: absolute;
  right: 0px;
  bottom: 0px;
}
.cinema-tags {
  margin-top: 10px;
  color: #9b89e1;
  font-size: 14px;
}
.cinema-tags .cinema-tags-item {
  display: inline-block;
  border: 2px solid #9b89e1;
  border-radius: 3px;
  margin-right: 8px;
}
.cinema-tagv p {
  font-size: 13px;
  color: #999;
}
.cinema-tagv p span {
  display: inline-block;
  border: 2px solid #9b89e1;
  background-color: #9b89e1;
  color: #fff;
  border-radius: 3px;
  margin-right: 5px;
  font-size: 14px;
}
</style>



